<template>
	<section class="app-main">
		<router-view v-slot="{ Component, route }">
			<transition name="fade-transform" mode="out-in">
				<!-- <keep-alive :include="cachedViews">
					<component :is="Component" :key="route.path" />
				</keep-alive> -->
				<keep-alive v-if="route.meta.keepAlive">
					<component :is="Component" :key="route.name" />
				</keep-alive>
				<component :is="Component" v-else :key="route.name" />
			</transition>
		</router-view>
	</section>
</template>

<script setup lang="ts">
import useTagsViewStore from '@/store/modules/tagsView';
import { useRoute, useRouter } from 'vue-router';
import { computed, watch, ref, onMounted, onActivated } from 'vue';
import useUserinfo from '@/store/modules/userinfo';
import useCommonStore from '@/store/modules/common';
import { checkToken } from '@/api/login';

const tagsViewStore = useTagsViewStore();
const commonStore = useCommonStore();
const userinfoStore = useUserinfo();

const route = useRoute();
const router = useRouter();
tagsViewStore.addCachedView(route);

// 是否禁止刷新token
const refreshLock = ref(false);
const refreshTime = ref();

const cachedViews = computed(() => {
	return tagsViewStore.cachedViews;
});

watch(
	() => router.currentRoute.value,
	(newValue) => {
		console.log('router.currentRoutechange', tagsViewStore.cachedViews);
		let pathArr = newValue.path.split('/');
		let system = pathArr[1];
		if (system) {
			document.body.setAttribute('system', system);
		}
	},
	{ immediate: true }
);
console.log('cachedViews', cachedViews);

onMounted(() => {
	handleRefreshToken();
	initWindow();
});
onActivated(() => {
	console.log('dsd--------------');
});

// 定时刷新token
const handleRefreshToken = () => {
	refreshTime.value = setInterval(() => {
		checkToken(refreshTime.value, refreshLock.value);
	}, 60000);
};

// 屏幕检测
const initWindow = () => {
	commonStore.setScreen(calcScreen());
	window.onresize = () => {
		setTimeout(() => {
			commonStore.setScreen(calcScreen());
		}, 0);
	};
};

/**
 * 计算屏幕大小
 * @returns {number}
 */
const calcScreen = () => {
	let width = document.body.clientWidth;
	if (width >= 1200) {
		return 3; // 大屏幕
	} else if (width >= 992) {
		return 2; // 中屏幕
	} else if (width >= 768) {
		return 1; // 小屏幕
	} else {
		return 0; // 超小屏幕
	}
};
</script>

<style lang="scss" scoped>
.app-main {
	/* 50= navbar  50  */
	min-height: calc(100vh - 84px);
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 0;
}

.fixed-header + .app-main {
	padding-top: 30px;
}

.fixed-header + .app-main {
	margin-top: 84px;
	min-width: 1440px;
	overflow-x: auto;
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
	.fixed-header {
		padding-right: 17px;
	}
}

// global transition css

/* fade */
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
	opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
	transition: all 0.5s;
}

.fade-transform-enter {
	opacity: 0;
	transform: translateX(-30px);
}

.fade-transform-leave-to {
	opacity: 0;
	transform: translateX(30px);
}

/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
	transition: all 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
	opacity: 0;
	transform: translateX(20px);
}

.breadcrumb-move {
	transition: all 0.5s;
}

.breadcrumb-leave-active {
	position: absolute;
}
</style>
